<template>
    <div>
        <header-1  @router="router">
            <template v-slot:center>
               <span class="center">
                    自建活动
               </span>
            </template>
        </header-1>
        <div class="show" @click="d1">
            <div class="show_1">
                <div class="show_2">
                    <div class="show_7">
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5474.png" class="img1" />
                    </div>
                    <div class="show_8">
                        <span class="show_3">进店领代金券</span>
                        <span class="show_4">创建代金券吸引更多客流</span>
                        <div class="show_5">
                            <div class="show_6">拉新</div>
                            <div class="show_11">引流</div>
                        </div>
                    </div>
            </div>
                <img class="show_9" src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                <img v-if="newactivity" class="show_20" src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5480.png">
            </div>
        </div>
        <div class="show" @click="d2">
            <div class="show_1">
                <div class="show_2">
                    <div class="show_7">
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5474.png" class="img1" />
                    </div>
                    <div class="show_8">
                        <span class="show_3">店铺满减</span>
                        <span class="show_4">下单满足条件可享受减免</span>
                        <div class="show_5">
                            <div class="show_12">促销</div>
                        </div>
                    </div>
            </div>
                <img class="show_9" src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                <img v-if="newactivity" class="show_20" src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5480.png">
            </div>
        </div>
        <div class="show" @click="d3">
            <div class="show_1">
                <div class="show_2">
                    <div class="show_7">
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5474.png" class="img1" />
                    </div>
                    <div class="show_8">
                        <span class="show_3">下单满返代金券</span>
                        <span class="show_4">下单满足条件返代金券</span>
                        <div class="show_5">
                            <div class="show_13">复购</div>
                        </div>
                    </div>
            </div>
                <img class="show_9" src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                <img v-if="newactivity" class="show_20" src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5480.png">
            </div>
        </div>
        <div class="show" @click="d4">
            <div class="show_1">
                <div class="show_2">
                    <div class="show_7">
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5474.png" class="img1" />
                    </div>
                    <div class="show_8">
                        <span class="show_3">店铺满赠</span>
                        <span class="show_4">下单满足条件送赠品</span>
                        <div class="show_5">
                            <div class="show_14">提高营业额</div>
                        </div>
                    </div>
            </div>
                <img class="show_9" src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                <img v-if="newactivity" class="show_20" src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5480.png">
            </div>
        </div>
        <div class="show" @click="d5">
            <div class="show_1">
                <div class="show_2">
                    <div class="show_7">
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5474.png" class="img1" />
                    </div>
                    <div class="show_8">
                        <span class="show_3">商品推荐活动</span>
                        <span class="show_4">店铺海报引导，商品推荐我作主</span>
                        <div class="show_5">
                            <div class="show_15">汇聚推荐商品</div>
                        </div>
                    </div>
            </div>
                <img class="show_9" src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                <img v-if="newactivity" class="show_20" src="https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/u5480.png">
            </div>
        </div>
        <p class="show_21">- 更多活动敬请期待 -</p>
    </div>
</template>
<script>
import header1 from '../../components/BS/header2View.vue'
export default {
   data(){
    return{
        newactivity:false
    }
   },
   components:{
    header1
   },
   created(){

   },
   methods:{
    // 代金券
    d1(){
        this.$router.push('/okavi7')
    },
    d2(){
        this.$router.push('okavi11')
    },
    d3(){
        this.$router.push('okavi15')
    },
    d4(){
        this.$router.push('okavi19')
    },
    d5(){
        this.$router.push('okavi26')
    },
    router(){
        this.$router.push('/tar')
    }

   }
}
</script>
<style scoped>
.show{
    width: 100%;
    height: 130px;
}
.show_1{
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
}
.show_2{
    width: 330px;
    height: 130px;
    display: flex;
    align-items: center;
}
.img1{
    width: 60px;
    height: 60px;
}
.show_3{
    font-size: 15px;
}
.show_4{
    font-size: 10px;
    color: #797979;
    margin-top: 15px;
    margin-bottom: 15px;
}
.show_5{
    display: flex;
}
.show_6,.show_19,.show_18,.show_17,.show_16,.show_15,.show_14,.show_13,.show_12,.show_11{
    width: 60px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    font-size: 10px;
    color: #FFFFFF;
    margin-right: 10px;
}
.show_7{
    margin-right: 25px;
}
.show_8{
    display: flex;
    flex-direction: column;
}
.show_9{
    width: 6px;
    height: 10px;
}
.show_6{
    background-image: url('https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/tag1_u5476.png');
}
.show_11{
    background-image: url('https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/tag2_u5475.png');
}
.show_12{
    background-image: url('https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/tag3_u5477.png');
}
.show_13{
    background-image: url('https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/tag4_u5478.png');
}
.show_14{
    background-image: url('https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/tag4_u5479.png');
    width: 100px;
    height: 22px;
}
.show_15{
    width: 100px;
    height: 22px;
    background-image: url('https://cdn3.axureshop.com/demo/1525603/images/%E8%87%AA%E5%BB%BA%E6%B4%BB%E5%8A%A8/tag4_u5488.png');
}
.show_20{
    width: 35px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
}
.show_21{
    width: 100%;
    text-align: center;
    color: #999999;
    font-size: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}
</style>